import React , {useEffect, useRef, useState} from 'react'
import {Form , Typography,Input,Row,Col ,Button, message } from 'antd'
import { reg } from '../../utils/validate'
import { TabletOutlined, AppstoreAddOutlined , LockOutlined} from '@ant-design/icons';
import "./index.scss"
import {Link} from 'react-router-dom'
import { ajax } from './../../api/index';
import { useNavigate } from 'react-router-dom';
const {Title} = Typography
var timer:any = null 
export default function ForgetPass() {
  const [src,setSrc] = useState<string>('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4')
  const [form] = Form.useForm()
  const myform:any  = useRef()
  const [flag,setFlag]  = useState<boolean>(true)
  let  [count,setCount] = useState<number>(120)
  const [disabled,setDisabled] = useState<boolean>(true)
  const navigate = useNavigate()
  const changePhone = ()=>{
    var phone = form.getFieldValue('phone')
    setDisabled(!reg.phone.test(phone))
  }
  const timeDown  =  ()=>{
    setCount(--count)
    setFlag(false)
    setInterval(()=>{
      if(count>0){
        setCount(--count)
        setFlag(false)
      }else{
        clearInterval(timer)
        timer = null 
        setCount(120)
        setFlag(true)
      }
    },1000)
  }
  const startToSend = async ()=>{
   let res = await  ajax.adminsendcaptcha({
     phone:form.getFieldValue('phone')
   })
  }
  const sendCaptcha = ()=>{
    timeDown()
    startToSend()
  }
  useEffect(()=>{
    var phone = form.getFieldValue('phone')
    setDisabled(!reg.phone.test(phone))

    return ()=>{
      clearInterval(timer)
      timer = null 
    }
  },[])

  const changepwdLast = ()=>{
    form.validateFields()
    .then(async value=>{
        let res = await ajax.changepwdbyphone(value)
        if(res.code==200){
          navigate('/login')
        }
    })
    .catch(err=>{
      message.error('信息输入有误,请重新输入')
    })
  }
  const layout = {
    labelCol:{
      span:5,
    },
    wrapperCol:{
      span:18
    }
  }
  const layout2 = {
    labelCol:{
      span:0,
    },
    wrapperCol:{
      offset:5,
      span:18
    }
  }
  return (
    <div className="login">
        <video 
            autoPlay
            muted
            loop
            playsInline
            id="myvideo"
            src={src}
            className="myvideo">
        </video>
        <div className="login-box">
            <Title className='title'>找回密码</Title>
            <div className="box">
            <Form
                name="normal_login"
                className="myform"
                initialValues={{ 
                  role:1   
                }}
                ref={myform}
                form={form}
                {...layout}
            >
                <Form.Item
                    name="phone"
                    label="手机号"
                    rules={[
                      { required: true, message: '请输入手机号' },
                      {
                        pattern:reg.phone,message:'请输入正确的手机号'
                      }
                    ]}
                >
                    <Input onChange={changePhone} prefix={<TabletOutlined className="form-icon"  style={{color:"#999"}} />} placeholder="手机号" />
                </Form.Item>
                <Form.Item
                    name="captcha"
                    label="验证码"
                    rules={[
                      { required: true, message: '请输入验证码' },
                      {
                        pattern:reg.code,message:'请输入长度为4位的验证码'
                      }
                    ]}
                >   
                    <Row>
                      <Col span={12}>
                        <Input prefix={<AppstoreAddOutlined className="form-icon"  style={{color:"#999"}} />} placeholder="验证码" />
                      </Col>
                      <Col span={6} offset={3}>
                        {
                          flag ?<Button onClick={sendCaptcha} danger  disabled={disabled}>
                              发送验证码
                          </Button>:
                          <Button disabled  >
                              剩余 {count} S
                          </Button>
                        }
                      </Col>
                    </Row>
                </Form.Item>
                <Form.Item
                name="password"
                  label="新密码"
                  rules={[
                      { required: true, message: '请输入密码' },
                      {pattern:reg.pwd, message:'请输入6-16的数字+字母组合的密码'}
                  ]}
              >
                  <Input prefix={<LockOutlined className="form-icon"  style={{color:"#999"}} />} placeholder="密码" />
              </Form.Item>
              <Form.Item className="lastbtns" {...layout2} >
                  <Row>
                      <Col span={24} offset={0}>
                          <Button type="primary" onClick={changepwdLast} className="login-form-button"  style={{width:'100%'}}>
                              找回密码
                          </Button>
                      </Col>
                  </Row>
              </Form.Item>
              <Form.Item className="lastbtns" {...layout2} >
                <div className="btns" >
                    <Link to="/register"  className='litem '>注册</Link>
                    <Link to="/login"  className='litem bg' >登录</Link>
                </div>
            </Form.Item>
            </Form>
            </div>
        </div>
    </div>
  )
}